<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <style>
        #hideDiv {
            transition: all linear 0.5s;
            background-color: aquamarine;
            border: 1px solid grey;
            width: 300px;
            height: 300px;
            margin: 20px;
        }
        /* 动画最终效果的css选择器必须优先于初始效果，例如此处如果只用.ng-hide，优先度低于id选择器，因此会没有效果 */
        #hideDiv.ng-hide {
            width: 0;
            height: 0;
            background-color: transparent;
        }

    </style>
</head>

<body>
    <div data-ng-app="myApp" data-ng-controller="myCtrl">
        隐藏：<input type="checkbox" data-ng-model="isHide" /><br />
        <div id="hideDiv" data-ng-hide='isHide'></div>
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular/angular-animate.min.js"></script>
    <script src="animation.js"></script>
</body>

</html>
